<!-- add by lty 20181222 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>查看详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/serverDetail.css">
      <!-- 插件js -->
	<script src="../js/zepto.js"></script>
	<script src="../js/sm.js" ></script>
	<script src="../js/sm-extend.js" ></script>
	<script src="../js/request.js"></script>
	<script src="js/jquery/3.2.1/jquery.min.js"></script>
	<script src="../../js/common.js"></script>
	
    <script type="text/javascript">
	window.$$=window.Zepto = Zepto;
	</script>
	<style type="text/css">
	.tolink{
	text-align: -webkit-center;
    margin-top: 10px;
    font-size: 15px;
    color: cornflowerblue;
    cursor: pointer;
    border: 1px solid #ddd;
    width: 80%;
    border-radius: 8px;
    margin-left: 10%;
    padding : 10px;
    background:  #FF9900;
    color: #fff;
	}
	</style>
  </head>
  <body>
    <div class="page">
      <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="javascript:window.history.back();" data-transition='slide-out'>
          <span class="icon icon-left"></span>
        </a>
        <h1 class="title">查看详情</h1>
      </header>

      <!-- 主体内容 -->
      <div class="T_content">
        <!-- 地址 -->
        <div class="service_address cl">
          <i class="icon icon-location fl"></i>
          <div class="address--line fl">
            <span class="address--name">姓名</span>
            <span class="address--phone">15626486938</span>
            <p class="address--detail esp1">珠海高新区香山小区7栋1803室</p>
          </div>
        </div>
        
        <!-- 保洁套餐 -->
        <div class="clean--detail">
          <p class="clean_detail--title">保洁套餐</p>
          <div class="clean_detail--goods cl">
            <p class="goods-img fl">
              <img id="logo" src="images/reportList/i-f7.png" alt="">
            </p>
            <div class="detail--goods_text fl">
              <p class="p1">日常保洁套餐</p>
              <p class="p2 esp2">一月四次日常保洁，轻松享受干净家居生活</p>
            </div>
          </div>
          <div class="goods_detail--list">
            <ul>
              <!-- <li class="cl">
                <span class="sp01 fl">购买套餐数量</span>
                <span class="sp02 fr">3份</span>
              </li> -->
              <li class="cl">
                <span class="sp01 fl">套餐包含服务小时</span>
                <span class="sp02 fr count"><!-- 12份 --></span>
              </li>
              <!-- <li class="cl">
                <span class="sp01 fl">应付款</span>
                <span class="sp02 fr">343元</span>
              </li> -->
              <li class="cl">
                <span class="sp01 fl">金额</span>
                <span class="sp02 fr money"><!-- 343元 --></span>
              </li>
              <li class="cl">
                <span class="sp01 fl">下单日期</span>
                <span class="sp02 fr date"><!-- 2018.10.25 --></span>
              </li>
            </ul>
          </div>
          
          <div class="service_detail--block">
            <p class="clean_detail--title">服务详情</p>
            <ul class="cl">
              <li class="fl">
                <span class="service--num number"><!-- 12 --></span>
                <p class="service--txt">服务次数</p>
              </li>
              <li class="fl">
                <span class="service--num done"><!-- 3 --></span>
                <p class="service--txt">已完成</p>
              </li>
              <li class="fl">
                <span class="service--num remain"><!-- 9 --></span>
                <p class="service--txt">未完成</p>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 保洁状态 -->
        <!-- <div class="clean_status--block">
          <ul>
            <li>创建时间：2018.10.25（11：25）</li>
            <li>预约时间：2018.10.28（11：25）</li>
            <li>状态：已完成</li>
          </ul>
        </div> -->
        
        <!--   <div class="clean_status--block">
          <ul>
            <li>创建时间：2018.10.25（11：25）</li>
            <li>预约时间：2018.10.28（11：25）</li>
            <li>状态：已完成</li>
          </ul>
        </div> -->
        <div class="tolink" style="display: none">前往评论</div>
      </div>
    </div>
    <script type="text/javascript">
    var orderId = Request.queryString("orderId");
    var path = "/LanJuPublic";
    $(function(){
    	queryPackageDetail();
    })
    var statusArr = {
    	"0":"待接单",
    	"1":"等待服务",
    	"2":"服务中",
    	"3":"已完成"
    }
    function queryPackageDetail(){
    	$.ajax({
			url : path+"/service/queryPackageDetail.do",
			data : {
				"orderId": orderId,
			},
			type : "GET",
			dataType : 'json',
			cache : false,
			success : function(ret){
				if(ret.result = true){
					var serviceCount;
					if(ret.packageList[0].status==3){
						$(".tolink").show();
					}
					if(ret.packageList && ret.packageList.length>0){
						$.each(ret.packageList,function(i,n){
							$(".address--name").text(n.nickName);
							$(".address--phone").text(n.phone);
							$(".address--detail").text(n.address);
							$(".p1").text(n.serviceName);
							$(".p2").text(n.serviceDesc);
							$("#logo").attr("src",n.imgUrl);
							if(n.chargesType == 1){
								serviceCount = parseInt(n.serviceCount)*4;
								$(".count").text(parseInt(ret.order[0].hours)+"小时");
								$(".number").text(parseInt(n.serviceCount)*4);
							}else if (n.chargesType == 2){
								serviceCount = parseInt(n.serviceCount);
								$(".count").text(ret.order[0].hours+"小时");
								$(".number").text(n.serviceCount);
							}
							$(".money").text(n.price);
							$(".date").text(formatDate(n.createTime));
						})
					}
					var done = 0;
					if(ret.packageList && ret.packageList.length>0){
						var html ='';
						$.each(ret.packageList,function(i,n){
							html+='<div class="clean_status--block">'+
						         ' <ul>'+
						         '<li>第'+(i+1)+'次</li>'+
				            '<li>创建时间：'+formatDate(n.createTime)+'</li>'+
				            '<li>预约时间：'+n.start_serviceDate+'</li>'+
				            '<li>状态：'+statusArr[n.status]+'</li>'+
				          '</ul>'+
				        '</div>';
							if(n.status == 3){
								done++;
							}
						});
						$(".clean--detail").after(html);
						$(".done").text(done);
						$(".remain").text(parseInt(serviceCount)-parseInt(done));
					}
					
				}
			}
		})
    }
    
    function formatDate(a) { 
    	var now= new Date(a);   
    	var year=now.getFullYear(); 
    	var month=now.getMonth()+1; 
    	var date=now.getDate(); 
    	var hour=now.getHours(); 
    	var minute=now.getMinutes(); 
    	var second=now.getSeconds(); 
    	return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;   
    	} 
    $(".tolink").click(function (){
    	window.location.href="../cleanComment.html?orderId="+orderId;
    })
    </script>
  </body>
</html>